<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上载演示</title>
    <script src="js/axios.min.js"></script>
    <style>
        button {
            border: 0;
            padding: 6px;
            background-color: #dc143c;
            color: #f0ffff;
            font-family: "幼圆", serif;

        }

    </style>
</head>
<body>
<form id="fileForm" method="post"
      enctype="multipart/form-data"
      onsubmit="return doUpload()">
    <div>
        <ul>
            <li>
                <label>选择文件
                    <input id="uploadFile" type="file" name="uploadFile">
                </label>
            </li>
            <li>
                <label>上传文件
                    <button type="submit">上传文件</button>
                </label>
            </li>
        </ul>

    </div>

</form>
</body>
<!--<script src="js/vue.js"></script>-->
<script>
    //jquery代码的表单提交事件
    function doUpload() {
        // debugger//debug窗口打开以后调试代码
        //获得用户选中的所有图片(获得数组)
        let files = document.getElementById("uploadFile").files;
        if (files.length > 0) {
            //获得用户选中的唯一图片(从数组中取出)
            let file = files[0];
            //开始上传这个图片
            //由于上传代码比较多,不想和这里其它代码干扰,所以定义一个方法调用
            upload(file);
        }
        //阻止表单提交效果
        return false;
    }

    // 将file上传到服务器的方法
    function upload(file) {
        //定义一个表单
        let form = new FormData();
        //将图片添加到表单中
        form.append("uploadFile", file);
        let url = "http://localhost:9999/sca/resource/upload/"

        //异步提交
        console.log('进入upload')

        axios.post(url,form,{headers:{"Authorization":"Bearer "+localStorage.getItem("accessToken")}})
            .then(function (response){
                alert("upload ok");
            })
            .catch(function(error) {
                if(error.response.status==401){
                    alert("请先登陆");
                    location.href="/login-sso.html";
                }else if(error.response.status==403){
                    alert("没有这个访问权限");
                }
            });
        //异步提交方式1
        // axios.post(url, form, {headers: {"Authorization": "Bearer " + localStorage.getItem("accessToken")}})
        //     .then(function (response) {
        //         console.log('进入上传')
        //         console.log("response", response);
        //         let result = response.data;
        //         console.log('输出result')
        //         console.log('result', result)
        //         if (response.state) {
        //             if (response.state == 403) {
        //                 alert(response.message);
        //                 return;
        //             }
        //             alert("upload ok");
        //         }
        //     })
        //     .catch((error) => {
        //             console.log('catch....')
        //             console.log('error', error)
        //             if (error.status && error.status == 401) {
        //
        //                 let loginUrl = "http://localhost:8080/login-sso.html"
        //                 let flag = confirm('是否要去登录?')
        //                 if (flag == true) {
        //                     location.href = "/login-sso.html"
        //                 }
        //             } else if (error.statusCode && error.statusCode == 403) {
        //                 alert(error.message);
        //             }
        //             return
        //         }
        //     )

    }

</script>
</html>
